<template>
  <view class="page-content">
    <view style="padding: 0 32rpx; height: 100%; overflow-y: auto">
      <view class="content-box">
        <view class="notice-box">
          <u-notice-bar
            mode="horizontal"
            :list="list"
            color="#000000"
            bg-color="rgba(255,214,0,0.25)"
            border-radius="4"
            :volume-icon="false"
            font-size="20"
          ></u-notice-bar>
        </view>
        <view class="form-box">
          <view class="form-item">
            <view class="flex-row justify-between items-center section_2">
              <view class="flex-row">
                <image
                  class="shrink-0 image_4"
                  src="/static/index/location-light.png"
                />
                <text class="font_3 text_2 ml-9">出发地</text>
              </view>
              <view
                class="flex-row items-center"
                v-if="!formdata.placeDeparture"
              >
                <view
                  class="flex-col justify-start items-center shrink-0 text-wrapper_2"
                  @click="handleToStartAddress"
                >
                  <text class="font_2">地址簿</text>
                </view>
                <text class="ml-10 font_4" @click="getDeliveryAddress"
                  >点击选择</text
                >
              </view>
              <u-input
                v-else
                :custom-style="inputStyle"
                input-align="right"
                v-model="formdata.placeDeparture"
              />
            </view>
          </view>
          <view class="form-item">
            <view class="flex-row justify-between items-center section_2">
              <view class="flex-row">
                <image
                  class="shrink-0 image_4"
                  src="/static/index/location-dark.png"
                />
                <text class="font_3 text_2 ml-9">目的地</text>
              </view>
              <view class="flex-row items-center" v-if="!formdata.destination">
                <view
                  class="flex-col justify-start items-center shrink-0 text-wrapper_2"
                  @click="handleToEndAddress"
                >
                  <text class="font_2">地址簿</text>
                </view>
                <text class="ml-10 font_4" @click="getDestination"
                  >点击选择</text
                >
              </view>
              <u-input
                v-else
                :custom-style="inputStyle"
                input-align="right"
                v-model="formdata.destination"
              />
            </view>
          </view>
          <view class="form-item">
            <view class="flex-row justify-between items-center section_2">
              <view class="flex-row">
                <image class="shrink-0 image_4" src="/static/index/time.png" />
                <text class="font_3 text_2 ml-9">出发时间</text>
              </view>
              <view class="flex-row items-center">
                <u-input
                  :custom-style="inputStyle"
                  input-align="right"
                  v-model="formdata.departureTime"
                  placeholder="请选择"
                  disabled
                  @click="showTime = true"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <form-item-title text="个人信息"></form-item-title>
      <view class="content-box">
        <view class="form-box">
          <u-form :label-style="labelStyle">
            <view class="flex-row justify-between items-center group_6">
              <text class="font_3 text_7">本人照片</text>
              <u-upload
                :action="action"
                :header="header"
                height="80"
                width="120"
                max-count="1"
                @on-success="successPhoto"
                @on-remove="removePhoto"
                ref="photoref"
              ></u-upload>
            </view>
            <view class="flex-row justify-between items-center group_6">
              <text class="font_3 text_7">驾照</text>
              <u-upload
                :action="action"
                :header="header"
                height="80"
                width="120"
                max-count="1"
                @on-success="successJZ"
                @on-remove="removeJZ"
                ref="jzref"
              ></u-upload>
            </view>
            <u-form-item label="姓名"
              ><u-input input-align="right" v-model="formdata.name"
            /></u-form-item>
            <u-form-item label="年龄"
              ><u-input
                type="number"
                input-align="right"
                v-model="formdata.age"
            /></u-form-item>
            <u-form-item label="性别"
              ><u-input
                :disabled="true"
                input-align="right"
                @click="showSex = true"
                v-model="sexlabel"
                type="select"
            /></u-form-item>
            <u-form-item label="驾龄(年)"
              ><u-input
                type="number"
                input-align="right"
                v-model="formdata.drivingExperience"
            /></u-form-item>
            <u-form-item label="电话"
              ><u-input
                type="number"
                input-align="right"
                v-model="formdata.phone"
            /></u-form-item>
            <u-form-item label="地址"
              ><u-input
                input-align="right"
                v-model="formdata.address"
                disabled
                @click="getAddress"
            /></u-form-item>
          </u-form>
        </view>
      </view>
      <form-item-title text="车辆信息"></form-item-title>
      <view class="content-box">
        <view class="form-box">
          <u-form :label-style="labelStyle">
            <view class="flex-row justify-between items-center group_6">
              <text class="font_3 text_7">车辆照片</text>
              <u-upload
                :action="action"
                :header="header"
                height="80"
                width="120"
                max-count="1"
                @on-success="successCL"
                @on-remove="removeCL"
                ref="clref"
              ></u-upload>
            </view>
            <u-form-item label="车辆型号"
              ><u-input input-align="right" v-model="formdata.carModel"
            /></u-form-item>
            <u-form-item label="是否有营运资格证"
              ><u-switch
                slot="right"
                active-color="#FCD610"
                v-model="yyzgzchecked"
              ></u-switch
            ></u-form-item>
            <view class="flex-row justify-between items-center group_6">
              <text class="font_3 text_7">上传营运资格证</text>
              <u-upload
                :action="action"
                :header="header"
                height="80"
                width="120"
                max-count="1"
                @on-success="successYyzz"
                @on-remove="removeYyzz"
                ref="yyzzref"
              ></u-upload>
            </view>
          </u-form>
        </view>
      </view>
      <view class="content-box">
        <view class="form-box">
          <u-form-item
            label="备注"
            :label-style="labelStyle"
            label-position="top"
          >
            <u-input type="textarea" v-model="formdata.remark" />
          </u-form-item>
        </view>
      </view>
      <view class="flex-col justify-center items-center">
        <view
          class="flex-row justify-center items-center"
          style="margin-bottom: 24rpx"
        >
          <u-checkbox
            v-model="checked"
            active-color="#FCD610"
            :label-disabled="false"
            >我已阅读并同意</u-checkbox
          >
          <view class="flex-row justify-center items-center">
            <text
              @click="
                handleToLink(
                  '/page_index/me/components/privacy-agreement/privacy-agreement'
                )
              "
              >《隐私协议》</text
            >和<text
              @click="
                handleToLink(
                  '/page_index/me/components/account-agreement/account-agreement'
                )
              "
              >《用户协议》</text
            >
          </view>
        </view>
        <view class="publish-btn" @tap="handleSubmit"> 立即发布 </view>
      </view>
    </view>
    <u-select
      v-model="showSex"
      mode="single-column"
      :list="sexlist"
      @confirm="handlesexconfirm"
    ></u-select>
    <u-picker
      mode="time"
      v-model="showTime"
      :params="timeParams"
      @confirm="handletimeconfirm"
    ></u-picker>
  </view>
</template>

<script>
import formItemTitle from "components/index/form-item-title.vue";
import petBasi from "../../../api/petBasi.js";
import utils from "../../../utils/util.js";
const app = getApp();
export default {
  data() {
    return {
      list: [
        "温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。",
      ],
      action: this.$config.mobeilURL + "/common/uploadFile", // 演示地址
      labelStyle: {
        fontWeight: "bold",
        fontSize: "28rpx",
        whiteSpace: "nowrap",
      },
      inputStyle: {
        fontSize: "24rpx",
        minHeight: "44rpx",
        lineHeight: "44rpx",
      },
      checked: true,
      yyzgzchecked: true,
      formdata: {
        address: "",
        age: "",
        carModel: "",
        carPhoto: "",
        certificatePhoto: "", //营运资格证照片
        placeDeparture: "", //起送地址
        placeDepartureLat: "",
        placeDepartureLng: "",
        departureTime: "", //出发时间
        destination: "", //目的地
        destinationLat: "",
        destinationLng: "",
        driverLicense: "", //驾照
        driverPhoto: "", //司机照片
        drivingExperience: "", //驾龄
        lat: 0,
        lng: 0,
        name: "",
        phone: "",
        publisher: "",
        publisherId: "",
        remark: "",
        sex: "",
      },
      showSex: false,
      sexlist: [
        {
          value: 0,
          label: "男",
        },
        {
          value: 1,
          label: "女",
        },
      ],
      sexlabel: "",
      showTime: false,
      timeParams: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false,
      },
      header: {
        "content-type": "multipart/form-data",
        Authorization: uni.getStorageSync("cxbtoken"),
      },
    };
  },
  onShow() {
    if (app.globalData.startaddress) {
      const address = app.globalData.startaddress;
      this.formdata.placeDeparture = `${address.address}${address.houseNumber}`;
      this.formdata.placeDepartureLat = address.lat;
      this.formdata.placeDepartureLng = address.lng;
      app.globalData.startaddress = undefined;
    }
    if (app.globalData.endaddress) {
      const address = app.globalData.endaddress;
      this.formdata.destination = `${address.address}${address.houseNumber}`;
      this.formdata.destinationLat = address.lat;
      this.formdata.destinationLng = address.lng;
      app.globalData.endaddress = undefined;
    }
  },
  methods: {
    handlesexconfirm(val) {
      this.formdata.sex = val[0].value;
      this.sexlabel = val[0].label;
    },
    handletimeconfirm(val) {
      this.formdata.departureTime = `${val.year}-${val.month}-${val.day} ${val.hour}:${val.minute}`;
    },
    //定位起送地
    getDeliveryAddress() {
      utils.chooseLocationInfo().then((res) => {
        this.formdata.lat = res.longitude;
        this.formdata.lng = res.latitude;
        this.formdata.placeDepartureLat = res.longitude;
        this.formdata.placeDepartureLng = res.latitude;
        this.formdata.placeDeparture = res.name;
      });
    },
    //目的地
    getDestination() {
      utils.chooseLocationInfo().then((res) => {
        this.formdata.destinationLat = res.longitude;
        this.formdata.destinationLng = res.latitude;
        this.formdata.destination = res.name;
      });
    },
    //司机地址
    getAddress() {
      utils.chooseLocationInfo().then((res) => {
        // this.formdata.lat = res.longitude;
        // this.formdata.lng = res.latitude;
        this.formdata.address = res.name;
      });
    },
    successPhoto(data, index) {
      if (data.code !== 200) {
        this.$refs.photoref.lists[index].error = true;
      } else {
        this.formdata.driverPhoto = data.accessPath;
      }
    },
    removePhoto(index) {
      this.formdata.driverPhoto = "";
    },

    successJZ(data, index) {
      if (data.code !== 200) {
        this.$refs.jzref.lists[index].error = true;
      } else {
        this.formdata.driverLicense = data.accessPath;
      }
    },
    removeJZ(index) {
      this.formdata.driverLicense = "";
    },

    successCL(data, index) {
      if (data.code !== 200) {
        this.$refs.clref.lists[index].error = true;
      } else {
        this.formdata.carPhoto = data.accessPath;
      }
    },
    removeCL(index) {
      this.formdata.carPhoto = "";
    },

    successYyzz(data, index) {
      if (data.code !== 200) {
        this.$refs.yyzzref.lists[index].error = true;
      } else {
        this.formdata.certificatePhoto = data.accessPath;
      }
    },
    removeYyzz(index) {
      this.formdata.certificatePhoto = "";
    },
    handleSubmit() {
      if (!this.checked) {
        uni.showToast({
          title: "请同意协议",
          icon: "none",
        });
        return;
      }
      if (this.yyzgzchecked && this.formdata.certificatePhoto == "") {
        uni.showToast({
          title: "请上传营运资格证",
          icon: "none",
        });
        return;
      }
      utils.checkSubscribe([
        "swQla8wtYPldE7zxun9H65wecf7eJ05xg9Q2LJtMGYQ",
        "jkg1ctjbYrmJcM7WpiwcjsHuga0ZJMbZpSUXTqtpl-Q",
      ]);
      this.formdata.lng = `${this.formdata.lng}`;
      this.formdata.lat = `${this.formdata.lat}`;
      uni.showLoading({
        title: "发布中",
      });
      petBasi
        .addDriverPlan(this.formdata)
        .then((res) => {
          uni.hideLoading();
          if (res.code === 0) {
            uni.showToast({
              title: "发布成功",
              icon: "none",
            });
          } else {
            uni.showToast({
              title: "发布失败",
              icon: "error",
            });
          }
          uni.navigateBack();
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: "发布失败",
            icon: "error",
          });
        });
    },
    handleToStartAddress() {
      uni.navigateTo({
        url: "/page_index/me/components/address/address?urlname=startaddress",
      });
    },
    handleToEndAddress() {
      uni.navigateTo({
        url: "/page_index/me/components/address/address?urlname=endaddress",
      });
    },
    handleToLink(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
  components: {
    formItemTitle,
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  background-color: #f6f6f6;
  overflow-y: auto;

  .content-box {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .notice-box {
      padding: 24rpx;
    }

    .form-box {
      padding: 0 32rpx 32rpx 32rpx;
      margin-bottom: 40rpx;

      .form-item {
        margin-top: 24rpx;

        .ml-9 {
          margin-left: 18rpx;
        }

        .section_2 {
          padding: 26rpx 36rpx 26rpx 44rpx;
          background-color: #ffd6000d;
          border-radius: 16rpx;

          .image_4 {
            width: 24rpx;
            height: 28rpx;
          }

          .font_3 {
            font-size: 28rpx;
            font-family: PingFang SC;
            line-height: 25.76rpx;
            font-weight: 700;
            color: #000000;
          }

          .text_2 {
            line-height: 26.12rpx;
          }

          .text-wrapper_2 {
            padding: 12rpx 0;
            background-color: #fbd610;
            border-radius: 8rpx;
            overflow: hidden;
            width: 100rpx;
            height: 44rpx;

            .font_2 {
              font-size: 20rpx;
              font-family: PingFang SC;
              line-height: 18.4rpx;
              color: #000000;
            }
          }

          .font_4 {
            font-size: 24rpx;
            font-family: PingFang SC;
            line-height: 22.1rpx;
            color: #666666;
          }
        }
      }

      .group_6 {
        padding: 32rpx 0;
        border-bottom: solid 2rpx #f3f3f3;

        .font_3 {
          font-size: 28rpx;
          font-family: PingFang SC;
          line-height: 25.76rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_7 {
          line-height: 26.02rpx;
        }

        .image-wrapper {
          background-color: #ececec;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100rpx;
          height: 100rpx;
          font-size: 30px;
          color: #999999;
        }
      }
    }
  }

  /deep/ .u-add-tips {
    display: none;
  }

  .publish-btn {
    width: 100%;
    padding: 40rpx 0;
    background-color: #fbd610;
    border-radius: 68rpx;
    font-size: 32rpx;
    text-align: center;
    font-weight: 700;
    margin-bottom: 24rpx;
  }
}
</style>
